export default defineComponent({
  name: "SearchForm",
  props: {
      items: {
          type: Array,
      },
      span: {
          type: Number,
          default: 6,
      },
      gutter: {
          type: Number,
          default: 0,
      },
      justify: {
          type: String,
          default: "start",
      },
      searchValue: Function,
  },
  setup(props: any, { slots }: any) {
      const state: UnwrapRef<any> = reactive<any>({});

      const renderFormItem = (item: ISearchField) => {
          switch (item.type) {
              case FieldTypeEnum.STRING:
                  return (
                      <Input
                          style={{ width: item.width + "px" }}
                          onInput={(e) =>
                              (state[item.field] = e.target.value)
                          }
                          allowClear
                          placeholder={
                              (item.placeholder || "请输入") as string
                          }
                      ></Input>
                  );
              case FieldTypeEnum.DATE:
                  return (
                      <RangePicker
                          locale={locale}
                          placeholder={
                              (item.placeholder || [
                                  "开始时间",
                                  "结束时间",
                              ]) as Array<string>
                          }
                          onChange={(data: any, dateString: any) => {
                              if (data) {
                                  state[
                                      item.field
                                  ] = `${dateString[0]} 到 ${dateString[1]}`;
                              } else {
                                  state[item.field] = "";
                              }
                          }}
                      ></RangePicker>
                  );
              case FieldTypeEnum.SELECT:
                  return (
                      <Select
                          options={item?.options || []}
                          onChange={(e) => (state[item.field] = e)}
                          allowClear
                          placeholder={item.placeholder || "请选择"}
                          style={{ width: "200px" }}
                      ></Select>
                  );
              case FieldTypeEnum.SELECTMULTIPLE:
                  return (
                      // optionFilterProp={item.optionFilterProp}
                      <Select
                          optionFilterProp={"label"}
                          mode="multiple"
                          options={item?.options || []}
                          onChange={(e) => selectMultiple(e, item)}
                          allowClear
                          placeholder={item.placeholder || "请选择"}
                          style={{ width: "300px" }}
                      ></Select>
                  );
              case FieldTypeEnum.SELECT_TREE:
                  return (
                      <TreeSelect
                          allowClear={true}
                          onChange={(e) => (state[item.field] = e)}
                          tree-data={item?.options || []}
                          placeholder={item.placeholder || "请选择"}
                          style={{ width: "200px" }}
                      ></TreeSelect>
                  );
          }
      };
      const selectMultiple = (e: any, item: ISearchField) => {
          state[item.field] = e.length > 0 ? JSON.stringify(e) : null;
      };

      const renderItem = () => {
          const { items } = props;
          if (!Array.isArray(items) || !items.length) {
              return {
                  default: () => [],
              };
          }
          return items.map((item) => (
              <Col class="search-form-field">
                  {{
                      default: () => renderFormItem(item),
                  }}
              </Col>
          ));
      };

      const handleSearch = () => {
          //？是如果有就调用 .是调用
          props.searchValue?.(state);
      };

      const button = () => {
          const { items } = props;
          if (!Array.isArray(items) || items.length == 0) {
              return;
          }

          return (
              <Col class="search-button">
                  {{
                      default: () => (
                          <Button
                              type="primary"
                              htmlType="submit"
                              shape="circle"
                              icon={<SearchOutlined></SearchOutlined>}
                              onClick={handleSearch}
                          ></Button>
                      ),
                  }}
              </Col>
          );
      };
      const toolbar = () => {
          if (Object.keys(slots).length > 0) {
              return Object.keys(slots).map((slot) => slots[slot]());
          }
      };

      return () => {
          const { gutter, justify } = props;
          return (
              <Row gutter={gutter} justify={justify}>
                  {{
                      default: () => [renderItem(), button(), toolbar()],
                  }}
              </Row>
          );
      };
  },
});
